<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleUpdateProduct()"
        size="mini">
        添加
      </el-button>
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="input"
        clearable
        size="mini">
      </el-input>
      <el-button
        class="btn-add"
        @click="quzzyQuery()"
        size="mini">
        查询
      </el-button>
    </el-card>

    <el-table ref="productTable"
              style="width: 100%"
              :data="productList"
              border>
      <el-table-column type="selection" width="60" align="center"></el-table-column>
      <el-table-column label="广告编号" width="100" prop="homeBillboardsId" align="center">
      </el-table-column>
      <el-table-column label="店铺编号" width="100" prop="storeId" align="center">
      </el-table-column>
      <!-- <el-table-column label="设置" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="getAttrList(scope.$index, scope.row)">属性列表
          </el-button>
        </template>
      </el-table-column> -->
        <el-table-column
          prop="imagePath"
          label="广告图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.imagePath" width="100" height="50px">
          </template>
        </el-table-column>
      <el-table-column label="价格" width="100" prop="picturePrice" align="center">
      </el-table-column>
      <el-table-column label="开始时间" width="100" :formatter="dateFormatter" prop="startTime" align="center">
      </el-table-column>
       <el-table-column label="结束时间" width="100" :formatter="dateFormatter" prop="endTime" align="center">
      </el-table-column>
      <el-table-column label="创建人" width="100" prop="createAdmin.adminAccount" align="center">
      </el-table-column>
      <el-table-column label="创建时间" width="100" :formatter="dateFormatter" prop="kindsCreateTime" align="center">
      </el-table-column>
      <el-table-column label="更新人" width="100" prop="updateAdmin.adminAccount" align="center">
      </el-table-column>
      <el-table-column label="更新时间" width="100" :formatter="dateFormatter" prop="updateTime" align="center">
      </el-table-column>
      <el-table-column label="是否启用" width="200" prop="homeStatus" align="center">
        <template slot-scope="scope">
          <p>
          <el-radio-group v-model="scope.row.homeStatus" @change="handleDelete(scope.$index, scope.row)">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <p>
            <el-button
              size="mini"
              @click="handleUpdateProduct(scope.$index, scope.row)">编辑
            </el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.page.currentPage"
      layout="total, prev, pager, next, jumper"
      :total="this.page.total">
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="33%">
      <el-form ref="productAttrCatForm" :model="this.Form" :rules="rules" label-width="120px">

        <el-form-item label="广告编号" prop="homeBillboardsId" v-show="false">
          <el-input  v-model="Form.homeBillboardsId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺编号" prop="storeId">
          <el-input v-model="Form.storeId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告图片" prop="imagePath">
                <el-upload
                  class="avatar-uploader"
                  action="http://120.24.21.113:8201/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
      </el-form-item>
       <el-form-item label="价格" prop="picturePrice">
          <el-input v-model="Form.picturePrice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始至结束时间" prop="startTime">
           <el-date-picker
            v-model="strtandend"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(Form)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios"
  export default {
    name: "kindsList",
    data() {
      return{
          input:"",
        productList:[],
        kindStatus:false,
        dialogTitle:"",
        dialogVisible:false,
         imageUrl: '',
         strtandend: [new Date(), new Date()],
          mo:false,
          Form:{
          homeBillboardsId:"",
          storeId:"",
           imagePath:"",
          picturePrice:"",
           startTime:"",
          endTime:"",
        },
          page: {
              currentPage:1,
              total: 0,
              page: 0,
              rows: 10,
          },
        rules: {
          storeId: [
            { required: true, message: '请输入店铺id', trigger: 'blur' }
          ],
          imagePath: [
            { required: true, message: '请添加图片', trigger: 'blur' }
          ],
          picturePrice: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      console.log("*********")
      this.getList();
    },
    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.page.rows = size;
            console.log(this.page.rows)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
            this.page.currentPage = currentPage;
            this.page.page=(currentPage*this.page.rows)-this.page.rows
            if(this.mo==true){
                this.quzzyQuery()
            }else{
                this.getList();
            }
            console.log(this.page.currentPage)  //点击第几页
        },
        quzzyQuery() {
            this.mo=true
            axios.get("http://localhost:8201/home/moFindAll", {
                params: {
                    value: this.input,
                    page: this.page.page,
                    rows: this.page.rows
                }
            }).then(data => {
                console.log(data)
                if (data.data.list == null || data.data.list == "") {
                    this.$message({
                        message: '未查询到有关数据'
                    });
                    this.mo=false;
                    this.getList();
                } else {
                    this.productList = data.data.list;
                    this.page.total = data.data.total;
                }
            });
        },
       handleAvatarSuccess(res, file) {
         console.log(res)
        this.imageUrl = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleConfirm(kindsForm){
        this.Form.homeBillboardsId=""
        this.Form.imagePath=this.imageUrl
        this.Form.startTime= moment(this.strtandend[0]).format("YYYY-MM-DD HH:mm:ss")
         this.Form.endTime= moment(this.strtandend[1]).format("YYYY-MM-DD HH:mm:ss")
        if(this.dialogTitle=="添加"){
          console.log(kindsForm)
          this.$axios({
            method: 'post',
            url: 'http://120.24.21.113:8201/home',
            data: kindsForm,
          }).then(result=>{
            this.Form={};
            this.dialogVisible=false;
            this.getList();
          })
        }else if(this.dialogTitle=="编辑"){
          console.log(kindsForm)
          this.$axios({
            method: 'put',
            url: 'http://120.24.21.113:8201/home',
            data: kindsForm,
          }).then(result=>{
            this.Form={};
            this.dialogVisible=false;
            this.getList();
          })
        }

      },
      dateFormatter(row, column){
        var date = row[column.property];
        if(date == undefined){return ''};
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      getAttrList(index, row) {
        this.$router.push({path:'/attr/spuAttrList',query:{kindsId:row.kindsId}})
      },
      getList() {
          axios.get("http://localhost:8201/home/findAll",{
            params:{
                page: this.page.page,
                rows: this.page.rows
            }
          }).then(result=>{
            console.log(result)
              this.productList = result.data.list;
              this.page.total = result.data.total;
          })
      },
      /*删除*/
      handleDelete(index, row){
        var kindStatus=row.homeStatus==1?1:0;
        var bean={ homeBillboardsId:row.homeBillboardsId,
            homeStatus:kindStatus,
            updateBy:1}
        console.log(kindStatus)
        this.$axios({
          method: 'put',
          url: 'http://120.24.21.113:8201/home',
          data: bean
        }).then(result=>{
          this.getList();
        })
      },
      /*编辑*/
      handleUpdateProduct(index,row){

          this.$refs["productAttrCatForm"].validate((tt=>{
              console.log(tt)
              if (!tt) return;
              this.dialogVisible=true;
              if(row==undefined||row==''){
                  this.dialogTitle="添加";
                  this.Form={};
                  this.imageUrl="";
                  this.strtandend=[new Date(), new Date()];
                  // this.kindsForm.kindsId='';
              }else{
                  this.dialogTitle="编辑";
                  this.Form.homeBillboardsId=row.homeBillboardsId;
                  this.Form.storeId=row.storeId;
                  this.Form.picturePrice=row.picturePrice;
                  this.imageUrl=row.imagePath;
                  this.strtandend=[row.startTime, row.endTime];
              }
          }))


      },
      /*查看单条*/
      handleShowProduct(index,row){
        console.log("handleShowKinds",row);
      },

    }
  }
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
